<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            const $li = $('.list li');
            const $ul = $('.list');

            /*$li.click(function () {
                $(this).css({background:'red'});
            });*/


            // 事件委托写法, 性能高于上面的写法
            // 传入三个参数, 一个是元素, 二是绑定事件, 三是函数回调
            $ul.delegate('li', 'click', function () {
               $(this).css({background:'red'});
            });


        })

    </script>

</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>